import { onActivated, onMounted } from 'vue'
import { useRoute } from 'vue-router'

export default function useRouteQuery(key: string, onChange: (value: string) => void) {
  let query: string | null = null
  const route = useRoute()

  onActivated(() => {
    if (query === route.query[key]) return
    query = route.query[key] as string
    onChange(query)
  })
  onMounted(() => (query = route.query[key] as string))
}
